<template>
  <van-popup v-model:show="show" round position="left">
    <div class="popup-main">
      <div class="head-close">
        <svg-icon icon-class="close" class="close-icon" @click="close" />
      </div>
      <div class="menu-main">
        <div
          class="menu-item"
          :class="{ disabled: item.disabled }"
          v-for="(item, index) in list"
          :key="index"
          @click="handleLink(item)"
        >
          <div class="menu-item-text">{{ item.label }}</div>
          <svg-icon
            icon-class="arrow-right"
            class="arrow-right-icon"
            v-if="!item.disabled"
          />
        </div>
      </div>
    </div>
  </van-popup>
</template>

<script>
export default {
  props: {
    test: {
      type: String,
      default() {
        return "";
      },
      required: false,
    },
  },
  watch: {
    $route: {
      handler(val, oldval) {
        this.show = false;
      },
      deep: true,
    },
  },
  data() {
    return {
      show: false,
      list: [
        {
          label: "首页",
          path: "/",
        },
        {
          label: "充值",
          path: "",
        },
        {
          label: "钱包",
          path: "/wallet",
        },
        {
          label: "WONE配额",
          path: "/woneQuota",
        },
        {
          label: "節點分紅",
          path: "/node",
        },
        {
          label: "Dao社區",
          path: "/community",
        },
        {
          label: "密碼設定",
          path: "/account/password",
        },
        {
          label: "NFT 市場",
          path: "",
          disabled: true,
        },
        {
          label: "鏈商商城",
          path: "",
          disabled: true,
        },
        {
          label: "Game遊戲",
          path: "",
          disabled: true,
        },
        {
          label: "Defi 金融",
          path: "",
          disabled: true,
        },
      ],
    };
  },
  methods: {
    open() {
      this.show = true;
    },
    close() {
      this.show = false;
    },
    handleLink({ path }) {
      if (!path) return;
      this.$global.navigate({ path });
    },
  },
};
</script>

<style lang="scss" scoped>
.popup-main {
  width: 80vw;
  height: 100vh;
  padding: 24px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  .head-close {
    .close-icon {
      font-size: 36px;
      color: #91949a;
    }
  }
  .menu-main {
    flex: 1;
    overflow-y: auto;
    .menu-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      line-height: 1;
      margin-top: 60px;
      padding: 0 40px 0 20px;
      box-sizing: border-box;

      .menu-item-text {
        font-size: 36px;
        font-weight: 600;
        color: #2c2c2c;
      }
      .arrow-right-icon {
        font-size: 30px;
        color: #91949a;
      }
      &.disabled {
        pointer-events: none;
        .menu-item-text {
          color: #919191;
          font-weight: 400;
        }
      }
    }
  }
}
</style>
